<template>
  <div class="common-wrap">
    <el-row :gutter="10" style="margin:0;padding:10px 0" >
      <el-col :span="4">
        <WebsiteTree :cus-height="-6" @handleNodeClick="handleNodeClick" />
      </el-col>
      <el-col :span="20">
        <QueryForm
          ref="conditionForm"
          module="systemPcUsers"
          v-model:searchForm="searchForm"
          v-model:search-column="searchColumn"
          :searchBtnLoading="searchBtnLoading"
          @handle-search="handleSearch"
        />
        <div class="common-box">
          <div class="con-button-rows"></div>
          <MyTable
            ref="commonTable"
            :dataSource="dataSource"
            :columns="columns"
            :loading="tableLoading"
            :page-vo="pageVo"
            @handle-selection-change="handleSelectionChange"
            @handle-page-change="handlePageChange"
          />
        </div>
      </el-col>
    </el-row>
    <!-- 绑定角色弹窗 -->
    <Dialog
      v-if="bindOptions.visible"
      v-model:visible="bindOptions.visible"
      :bind-type="bindOptions.bindType"
      :t-type="bindOptions.tType"
      :current-user="bindOptions.currentUser"
      @submit="getTableList"
    />
  </div>
</template>
<script setup lang="tsx">
import { ref, reactive, onMounted, computed } from "vue";
import { formatterTimeZones } from "@/utils/mUtils";
import * as api from "@/api/index";
import i18n from "@/lang/index";
import Dialog from "./components/dialog.vue";
import { useStore } from "vuex";
defineOptions({
  name: "PcUsers",
});
const store = useStore();
const dataSource = ref([]);
const tableLoading = ref(false);
const searchBtnLoading = ref(false);
const pageVo = reactive({
  total: 0,
  pageSize: 50,
  currentPage: 1,
});
const bindOptions = reactive({
  visible: false,
  currentUser: {},
  tType: 1, // 类型：1-PC，2-APP,3-VIP
  bindType: "pc",
});
const currentSite = reactive({
  code: "",
});
const searchColumn = ref([
  {
    label: "用户账号",
    type: "label_input",
    placeholder: "请输入",
    prop: "userName",
  },
  {
    label: "用户昵称",
    type: "label_input",
    placeholder: "请输入",
    prop: "nickName",
  },
  {
    label: "手机号",
    type: "label_input",
    placeholder: "请输入",
    prop: "phonenumber",
  },
]);
const searchForm = reactive({});
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    fixed: "left",
    align: "center",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "userName",
    title: "用户账号",
  },
  {
    field: "nickName",
    title: "用户昵称",
  },
  {
    field: "site.siteCode",
    title: "组织编号",
  },
  {
    field: "site.siteNameChinese",
    title: "组织名称",
  },
  {
    field: "phonenumber",
    title: "手机号",
  },
  {
    field: "pcRoleName",
    title: "PC角色",
    width: "140px",
    formatter: ({ row }) => {
      return (
        row.roles &&
        row.roles
          .filter((item) => item.type === 1)
          .map((item) => item.roleName)
          .join(",")
      );
    },
  },
  {
    field: "createTime",
    title: "创建时间",
    width: "140px",
    formatter: ({ cellValue }) => {
      return formatterTimeZones(cellValue);
    },
  },
  {
    field: "status",
    title: "状态",
    width: "100px",
     filters: [
      { label: i18n.global.t("启用"), value: "0" },
      { label: i18n.global.t("禁用"), value: "1" },
    ],
    slots: { default: "status_default" },
    params: {
      color: {
        1: "gray",
        0: "green",
      },
    },
  },
  {
    title: "操作",
    field: "operation",
    width: 100,
    slots: { default: "operation_default" },
    params: [
      {
        title: "PC",
        icon: "Platform",
        hasPermi: "system:user:bindPc",
        click: (row) => {
          bindOptions.currentUser = row;
          // 绑定PC角色
          bindOptions.bindType = "pc";
          bindOptions.visible = true;
          bindOptions.tType = 1;
        },
      },
    ],
  },
]);
// 获取表格数据
async function getTableList() {
  tableLoading.value = true;
  searchBtnLoading.value = true;
  try {
    const { rows, total } = await api.default.system.user.list({
      siteCode: currentSite?.code,
      userType: store.state.user.userType,
      ...searchForm,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    });
    dataSource.value = rows;
    pageVo.total = total;
  } finally {
    tableLoading.value = false;
    searchBtnLoading.value = false;
  }
}
function handleSearch() {
  pageVo.currentPage = 1;
  getTableList();
}
function handleSelectionChange() {
  // this.multipleSelection = val;
}
// 分页
function handlePageChange(val) {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  getTableList();
}
function handleNodeClick(val) {
  Object.assign(currentSite, val);
  handleSearch();
}
onMounted(() => {
  getTableList();
});
</script>
<style lang="scss" scoped>
// 间距
.common-wrap {
  box-sizing: border-box;
}

</style>
